import React, {Component} from 'react';

import P0 from './P0';
import P1 from './P1';
import P2 from './P2';
import P3 from './P3';
import P4 from './P4';
import P5 from './P5';
import P6 from './P6';
import P7 from './P7';
import P8 from './P8';
import P9 from './P9';
import P10 from './P10';
import P11 from './P11';
import P12 from './P12';
import P13 from './P13';
import P14 from './P14';
import P15 from './P15';
import P16 from './P16';
import P17 from './P17';
import P18 from './P18';
import P19 from './P19';
import P20 from './P20';
import P21 from './P21';
import P22 from './P22';
import P23 from './P23';
import P24 from './P24';
import P25 from './P25';
import P25_1 from './P25_1';
import P26 from './P26';
import P27 from './P27';
import P28 from './P28';
import P29 from './P29';
import P30 from './P30';
import P31 from './P31';
import P32 from './P32';

import {loadPage, doLMSGetValue, doLMSSetValue, doLMSCommit} from './lib/AWI';

require('./css/frame.css');

const pages = [
  P0, P1, P2, P3, P4,
  P5, P6, P7, P8, P9,
  P10, P11, P12, P13,
  P14, P15, P16, P17,
  P18, P19, P20, P21,
  P22, P23, P24, P25,P25_1,
  P26, P27, P28, P29,
  P30, P31, P32
];
const flag = pages.map((item, i) => {
  if (i === 0) {
    return 2;
  } else {
    return 0;
  }
});
let anflag = [0, 0];
export default class Main extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      showpage: false,
      index: 0,
      quizIndex: 0,
    };


  }

  componentDidMount() {
    setTimeout(() => {
      let str = flag.join('_');
      loadPage(str, '2');
      doLMSGetValue('cmi.core.lesson_status');
      doLMSGetValue('cmi.suspend_data');
    }, 2000);


  }

  componentWillUnmount() {
    let status = this.doLMSGetValue('cmi.core.lesson_status');
    doLMSCommit();
    unloadPage(status);
  }

  LR(type) {
    let {index} = this.state;
    if (type === 'L') {
      index = index - 1;
    }
    if (type === 'R') {
      index = index + 1;
    }
    this.goPage(index);
  }

  goPage(i) {
    let {quizIndex} = this.state;
    if (i < 33) {
      this.setState({index: i, quizIndex: 0});
      flag[i] = 2;
    }else if(i ===33) {
      this.setState({index: i, quizIndex: 0});
    }else {
      if(quizIndex <= 14) {
        quizIndex = quizIndex + 2;
        if(quizIndex === 14){
          flag[flag.length-1] = 2;
        }

        if (window.nextFlag[0] + window.nextFlag[1] < 2 && window.showQuiz) {
          alert('请你正确完成答题，方可继续通过！');
        } else{
          this.setState({quizIndex});
          window.nextFlag = [0, 0];
        }
      /*  if (window.nextFlag[0] + window.nextFlag[1] === 2 ) {
          this.setState({quizIndex});
          window.nextFlag = [0, 0];
        } else if(window.showQuiz){
         alert('请你正确完成答题，方可继续通过！');
        }*/
      }
    }

    let str = flag.join('_');
    doLMSSetValue('cmi.suspend_data', str);
    if (str.indexOf('0') === -1) {
      doLMSSetValue('cmi.core.lesson_status', 'completed');
      doLMSCommit();
    }
  }

  setAnflag(i) {
    anflag[i] = 1;
  }

  render() {
    const {index, quizIndex} = this.state;
    const Current = pages[index];
    return (
      <div id="root">
        <LRButton LR={this.LR.bind(this)} index={index}/>
        <Current goPage={this.goPage.bind(this)}
                 quizIndex={quizIndex} setAnflag={this.setAnflag.bind(this)}/>
        <Footer index={index} goPage={this.goPage.bind(this)}/>
      </div>
    );
  }

}

const titles = [
  '进入课程',
  '目录',
  '供电方案-前部蓄电池',
  '联网方案',
  '防盗锁止系统和组件保护',
  '照明系统',
  '照明系统-前部灯光',
  '照明系统-尾部灯光',
  '照明系统-环境照明灯',
  'AID 主动信息显示屏',
  '视图模式切换',
  '组合仪表信息显示',
  '非液晶仪表',
  '舒适系统-紧凑型后视摄像头',
  '舒适系统- Compact 倒车影像头',
  '舒适系统-电动后尾门',
  '舒适系统-电动后尾门',
  '舒适系统-电动尾门',
  '舒适系统-电动尾门',
  '舒适系统-电动尾门',
  '舒适系统- KESSY 系统组成',
  '舒适系统- KESSY 系统结构',
  '舒适系统- KESSY 系统结构',
  '舒适系统-KESSY 系统影响因素',
  '舒适系统-应急操作',
  '舒适系统-车窗玻璃清洗',
  '舒适系统-前风挡玻璃加热',
  '信息娱乐系统',
  '信息娱乐系统- APP Connect',
  '信息娱乐系统-天线方案',
  '空调系统',
  '空调系统',
  '利用MIB对空调系统的操作',
  '课程测试',
];

const thumb = [
  './img/small/p_0.jpg',
  './img/small/p_1.jpg',
  './img/small/p_2.jpg',
  "./img/small/p_3.jpg",
  './img/small/p_4.jpg',
  './img/small/p_5.jpg',
  './img/small/p_6.jpg',
  './img/small/p_7.jpg',
  './img/small/p_8.jpg',
  './img/small/p_9.jpg',
  './img/small/p_10.jpg',
  './img/small/p_11.jpg',
  './img/small/p_12.jpg',
  './img/small/p_13.jpg',
  './img/small/p_14.jpg',
  './img/small/p_15.jpg',
  './img/small/p_16.jpg',
  './img/small/p_17.jpg',
  './img/small/p_18.jpg',
  './img/small/p_19.jpg',
  './img/small/p_20.jpg',
  './img/small/p_21.jpg',
  './img/small/p_22.jpg',
  './img/small/p_23.jpg',
  './img/small/p_24.jpg',
  './img/small/p_25.jpg',
  './img/small/p_26.jpg',
  './img/small/p_27.jpg',
  './img/small/p_28.jpg',
  './img/small/p_29.jpg',
  './img/small/p_30.jpg',
  './img/small/p_31.jpg',
  './img/small/p_32.jpg',
  './img/small/p_33.jpg',


];

class Footer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showImg: false,
      overIndex: 0,
      showHelp: false,
    };

  }

  onClick(i) {
    this.props.goPage(i);
  }

  onOver(i) {
    this.setState({
      overIndex: i,
      showImg: true,
    });
  }

  onLeave(i) {
    this.setState({
      showImg: false,
    });
  }

  showThum(i) {

    let leftpos = 180 + i * 19 + 'px';
    return (<div id="tipimg" style={{'left': leftpos}}>
      <img id="small" src={require(thumb[i] + '')}/>
    </div>);
  }

  onHelp() {
    let showHelp = !this.state.showHelp;

    this.setState({
      showHelp
    });
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.index !== this.props.index) {
      this.setState({
        showHelp: false
      });
    }
  }


  render() {
    const {index, goPage} = this.props;
    const {showImg, overIndex, showHelp} = this.state;
    return (
      <div>
        <p className="wd">
          服务技术培训部
        </p>

        <div className="help" style={{right: '40px'}} onClick={this.onHelp.bind(this)}>帮助&gt;</div>
        {showHelp && <div className="helpdiv">
          <img src={require('./img/help.png')}/>
          <p style={{top: '54px'}}>色点（热点）包含文本或图片形式的附加信息 </p>
          <p style={{top: '107px'}}>这里显示需要特别注意的信息 </p>
          <p style={{top: '210px'}}>您可以通过屏幕下方的按钮来选择各张幻灯片 </p>
          <p style={{top: '280px'}}>您可以点击回到上一页幻灯片，或进入下一页幻灯片</p>
          <p style={{top: '410px'}}>您可以点击回到上一页幻灯片，或进入下一页幻灯片</p>
        </div>
        }

        <ul className="simg">
          {
            titles.map((item, i) => {

              let srcimg = (index == i) ? 'ron' : 'roff';
              return (<li title={(i + 1) + '、' + item} idx={index} key={i}
                          onClick={this.onClick.bind(this, i)}
                          onMouseOver={this.onOver.bind(this, i)}
                          onMouseOut={this.onLeave.bind(this, i)}

              >
                <img src={require('./img/' + srcimg + '.png')}/>
              </li>);

            })
          }

        </ul>
        {showImg && this.showThum(overIndex)}
      </div>
    );
  }
}


class LRButton extends Component {
  constructor(...args) {
    super(...args);
  }

  render() {

    if (this.props.index === 1) {
      return (
        <div id="R" className="LR" style={{right: '10px'}} onClick={() => {
          this.props.LR('R');
        }}>&gt;</div>
      );
    }
    /*else if(this.props.index === titles.length-1) {
      return (
        <div id="L" className="LR" style={{left: "10px"}} onClick = {() =>{this.props.LR("L")}}>&lt;</div>
      );
    }*/
    else {
      return (
        <div>
          <div id="L" className="LR" style={{left: '10px'}} onClick={() => {
            this.props.LR('L');
          }}>&lt;</div>
          <div id="R" className="LR" style={{right: '10px'}} onClick={() => {
            this.props.LR('R');
          }}>&gt;</div>
        </div>
      );
    }

  }

}

